<template>
  <div>
    <el-dialog
      title="管理黑名单"
      custom-class="!mt-[10vh] min-w-200 min-h-190"
      :close-on-click-modal="false"
      :visible.sync="this.dialogVisible"
      :append-to-body="true"
      @open="getInit"
      height="700"
      :before-close="handleClose"
    >
      <div class="flex flex-col min-h-170">
        <div ref="filter" class="filter-container" style="margin-bottom: unset">
          <template>
            <el-input
              v-model="listQuery.email"
              size="mini"
              :placeholder="$t('common.enter', ['邮箱'])"
              style="width: 200px"
              class="filter-item filter-left"
              clearable
            />
            <el-button
              size="mini"
              class="filter-item filter-left"
              icon="el-icon-search"
              type="primary"
              style="margin-left: 5px"
              plain
              @click="search()"
            >
              {{ $t('common.search') }}
            </el-button>
            <el-button
              class="filter-item filter-left"
              size="mini"
              type="danger"
              @click="handleSelectedRemove()"
            >
              批量删除(选中)
            </el-button>
            <!-- <el-button
            size="mini"
            class="filter-item filter-left"
            type="success"
            style="margin-left: 5px"
            plain
            @click="handleAddNewGroup"
            >{{ $t('customer.addGroup') }}</el-button
          > -->

            <el-button
              size="mini"
              class="filter-item right filter-left filter-refresh"
              icon="el-icon-refresh"
              type="primary"
              plain
              @click="refresh()"
            />
          </template>
        </div>
        <el-table
          ref="table"
          :data="emailBlackLists.items"
          v-loading="$apollo.queries.emailBlackLists.loading"
          row-key="id"
          @selection-change="handleSelection"
          border
          height="600"
          class="!flex-1"
        >
          <el-table-column
            align="center"
            type="selection"
            reserve-selection
            width="55"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="email"
            label="邮箱"
            min-width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            :label="$t('common.actions')"
            min-width="100"
          >
            <template slot-scope="scope">
              <!-- <el-button
              type="text"
              size="small"
              @click="changeGroup(scope.row.id)"
              disabled
              >{{ $t('common.edit') }}</el-button
            > -->
              <el-button
                type="danger"
                plain
                size="small"
                @click="handleDelete(scope.row)"
                >{{ $t('common.delete') }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="h-12.5">
          <pagination
            v-show="emailBlackLists.totalCount > 0"
            :total="emailBlackLists.totalCount"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAction,
  postAction,
  getUrlAction,
  postUrlAction,
} from '@/api/common'
import Pagination from '@/components/Pagination/index.vue'
import gql from 'graphql-tag'
import request from '@/utils/request'

export default {
  name: 'ManageBlackList',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Pagination,
  },
  inject: ['showProgressDialog'],
  apollo: {
    emailBlackLists: {
      skip() {
        return !this.show
      },
      query: gql`
        query GetEmailBlackLists(
          $where: EmailBlackListFilterInput
          $take: Int!
          $skip: Int!
        ) {
          emailBlackLists(where: $where, take: $take, skip: $skip) {
            items {
              id
              email
              remark
              createdAt
            }
            totalCount
          }
        }
      `,
      variables() {
        let where = {}
        if (this.listQuery.email) {
          where = {
            or: [
              {
                email: {
                  startsWith: this.listQuery.email,
                },
              },
              {
                email: {
                  endsWith: this.listQuery.email,
                },
              },
            ],
          }
        }
        let take = this.listQuery.limit
        let skip = (this.listQuery.page - 1) * take
        return {
          where,
          take,
          skip,
        }
      },
    },
  },
  created() {
    this.getList()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    },
  },
  data: function () {
    return {
      /// /////////////////////////////////////////////////////////////////////////////////
      listQuery: {
        total: 0,
        page: 1,
        limit: 10,
        email: '',
      },
      emailBlackLists: {},
      options: [],
      selection: [],
      changeGroupIds: [],
      dialogVisible: this.show,
      listLoading: false,
      /// /////////////////////////////////////////////////////////////////////////////////
      emailGroupOptions: [],
      showAddGroupVisible: false,
      tableData: [],
    }
  },
  methods: {
    search() {
      this.getList()
    },
    refresh() {
      this.getInit()
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleAddNewGroup() {
      this.showAddGroupVisible = true
    },
    handleDelete(row) {
      request
        .delete(`api/emailBlackList/${row.id}`)
        .then((res) => {
          this.$message.success('[' + row.email + '] 删除成功')
          this.refresh()
        })
        .catch((res) => {
          this.$message.failed('[' + row.email + '] ' + res.message)
        })
    },
    handleSelection(val) {
      this.selection = val
    },
    /// /////////////////////////////////////////////////////////////////////////////////
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      this.getList()
    },
    getList() {
      this.$apollo.queries.emailBlackLists.refresh()
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    changeGroup(id) {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
    handleSelectedRemove() {
      const batchDeleteFunc = ({ item, message }) => {
        request
          .delete(`api/emailBlackList/${item.id}`)
          .then((res) => {
            message.success('[' + item.email + '] 删除成功')
          })
          .catch((res) => {
            message.failed('[' + item.email + '] ' + res.message)
          })
      }

      let rows = this.selection
      if (rows.length <= 0) {
        this.$message(this.$t('customer.checkDataNeedToBatchDelete'))
        return false
      }
      const uploadItems = [
        {
          name: '黑名单',
          num: rows.length,
          action: batchDeleteFunc,
          data: rows,
        },
      ]
      const uploadColumns = []
      this.showProgressDialog(
        uploadItems,
        uploadColumns,
        () => {
          this.refresh()
          this.$refs.table.clearSelection()
        },
        {
          title: this.$t('common.batchDeleteCantReverse'),
        }
      )
    },
  },
}
</script>

<style></style>
